function createQuestion()
{
	// create placeholder of question
	var placeHolder = document.getElementById(id);
	
	// create question
	var questionT = document.createTextNode(question);
	var questionP = document.createElement('p');
	questionP.appendChild(questionT);

	// append question to placeholder
	placeHolder.appendChild(questionP);

	// create form
	var form = document.createElement("form");

	var radioAnswers = [];
	for (var i = 0, max = answers.length; i < max; i++)
	{
		// create radio button
		radioAnswers[i] = document.createElement('input');
		radioAnswers[i].type = "radio";
		radioAnswers[i].name="answer"
		radioAnswers[i].value = answers[i];
		
		var answerText = document.createTextNode(answers[i]);
		var answerSpan = document.createElement('span');
		answerSpan.appendChild(answerText);
		var lineBreak = document.createElement("br");

		form.appendChild(radioAnswers[i]);
		form.appendChild(answerSpan);
		form.appendChild(lineBreak);
	}

	// create submit button
	var submitText = document.createTextNode("Answer");
	var submit = document.createElement("button")
	submit.type = "submit";
	submit.value = "Answer";
	submit.className = "btn btn-primary";
	submit.appendChild(submitText);

	
	form.appendChild(submit);

	// create text with the number of tries
	var showsubmissions = document.createTextNode("You used 0 of your " + submissions + " submissions");
	var submissionsSpan = document.createElement('span');
	submissionsSpan.className = "note";
	submissionsSpan.appendChild(showsubmissions);
	form.appendChild(submissionsSpan);

	// behaviour of the form
	form.onsubmit = function(tries) { return function() { 
						if (tries == 0 && submissions > 0)
						{	
							if(checkAnswer(this,tries))
							{
							 	++tries;
							}
						}
						else if (submissions > tries)
						{
							uncheckAnswer(this);
							if(checkAnswer(this,tries))
							 	++tries;
						}
						else
						{
							return false;
						}

						if(tries == submissions)
						{
							if(this.parentNode.getElementsByTagName("textarea").length == 0)
								showExplanation(this);
						}	
						return false;
						}}(0);
	
	placeHolder.appendChild(form);

	var lineBreak = document.createElement('br');
	placeHolder.appendChild(lineBreak);
	
	return true;
}

/**
 * Checks the answer with a correct or incorrect image
 */
function checkAnswer(form,tries)
{
	

	var childs = form.childNodes;
	var i = 0;
	var j = 0;
	var checked = false;
	// iterates over all form childs until it finds a choosen radio input or gives up at the submit button
	while ( childs[i].nodeName != "BUTTON")
	{
		if (childs[i].nodeName == "INPUT")
		{
			// radio button checked and it's the right answer
			if (childs[i].checked && j == correctAnswer)
			{
				correct = document.createElement("img");
				correct.src = resourcesLocation + "correct-1.0.png";
				form.insertBefore(correct, childs[i + 2]);
				checked = true;
				
				if(form.getElementsByTagName("textarea").length == 0)
					showExplanation(form);
				
				break;
			}
			// radio button checked but it's the wrong answer
			else if(childs[i].checked && j != correctAnswer)
			{
				wrong = document.createElement("img");
				wrong.src = resourcesLocation + "wrong-1.0.png";
				form.insertBefore(wrong, childs[i + 2]);
				checked = true;
				break;
			}
			
			j++;
		}
		i++;
	}
	
	if (checked)
	{
		updateTriesInfo(form,tries + 1);			
	}

	return checked;


}

/**
 * Remove check image
 */
function uncheckAnswer(form)
{
	childs = form.getElementsByTagName("img");
	if (childs)
		form.removeChild(childs[0]);

}

/**
 * Shows the explanation for the answer
 */
function showExplanation(form)
{
	var lineBreak = document.createElement('br');
	var explanationText = document.createTextNode(explanation);
	var textArea = document.createElement('textarea');
	textArea.cols = 50;
	textArea.rows = 5;
	textArea.disabled = true;
	textArea.appendChild(explanationText);
	form.appendChild(lineBreak);
	form.appendChild(textArea);
}

/**
 * Updates the tries text info
 */
function updateTriesInfo(form,tries)
{
	childs = form.getElementsByTagName("span");
	childs[childs.length - 1].innerHTML = "You used " + tries + " of your " + submissions + " submissions";
}
